<template>
  <!-- 表格模块 -->
  <div class="app-table-space weigh-device-static-table">
    <div class="app-table-space-padding">
      <div class="table-header">
        <el-row
          type="flex"
          align="middle"
          class="table-header-padding hardwareMonitor-table-header"
        >
          <el-col :span="14">
            <el-button
              type="primary"
              size="mini"
              @click="showHandleDialog('新增', '')"
              style="margin-left: 6px;"
            >新增</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格 -->
      <div class="table-body">
        <div class="table-body-padding">
          <el-table
            size="mini"
            :data="tableData"
            border
            tooltip-effect="light"
            show-overflow-tooltip="true"
            style="width: 100%; height: 100%;"
          >
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="80"
            >
              <template slot-scope="scope">
                <!-- 编辑 -->
                <el-button
                  style="padding:2px;margin: 0;background:none;border:none;"
                  size="mini"
                  type="primary"
                  @click="!operationDisabled?showHandleDialog('编辑',scope.row):''"
                >
                  <i
                    :class="!operationDisabled?'nano-edit-2':'nano-edit-2 disabled'"
                    :style="`color:#409EFF;font-size:14px;}`"
                  ></i>
                </el-button>
                <!-- 删除 -->
                <el-button
                  style="padding:2px;background:none;border:none;"
                  size="mini"
                  type="danger"
                  @click="!operationDisabled?handleDelete(scope.row):''"
                >
                  <i
                    :class="!operationDisabled?'nano-delete-2':'nano-delete-2 disabled'"
                    :style="`color:#f56c6c;font-size:14px;}`"
                  ></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in tableTitleData"
              :key="index"
              :min-width="item.minWidth"
              :show-overflow-tooltip="true"
              align="center"
              :prop="item.prop"
              :label="item.label"
              :sortable="item.sortable"
            >
              <template slot-scope="scope">
                <span>{{scope.row[item.prop]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <div
        class="table-footer"
        ref="nTableFooter"
      >
        <div class="table-footer-padding clearboth">
          <el-pagination
            class="n-pagination"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page.sync="paginationOptions.currentPage"
            :page-size="paginationOptions.pageSize"
            :page-sizes="paginationOptions.pageSizes"
            layout="sizes, prev, pager, next, jumper,total"
            :total="paginationOptions.totalRows"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { tableTitleData } from './js/options';
import Config from '@/config/sysConfig';
import busEvent from './js/busEvent';
import { GET_PLAN_LIST, DELETE_KEEP_PLAN } from '@/api/test';
import { Message } from 'element-ui';
import { mapGetters } from 'vuex';
import miment from 'miment';
export default {
  name: 'tableSpace',
  data() {
    return {
      // ================================================== 变量
      tableData: [], // 表格数据
      savedForm: '', // 保存的表单
      tableTitleData: tableTitleData, // 表头数据
      operationDisabled: false, // 操作的权限
      // =================================================== 对象
      // 分页数据
      paginationOptions: {
        currentPage: 1, // 当前页
        totalRows: 0, // 总页数
        pageSize: Config.pagination.pageSize, // 展示页数
        pageSizes: Config.pagination.pageSizes // 可选择展示页数 数组
      }
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  },
  created() {
    busEvent.$on('filterForm', form => {
      // eslint-disable-next-line no-unused-expressions
      form ? this.savedForm = form : '';
      this.getPlanList();
    });
  },
  methods: {
    // 新增/修改 弹窗
    showHandleDialog(type, row) {
      busEvent.$emit('showHandleDialog', {
        title: type,
        row: row ? row : ''
      });
    },
    // 改变当前页
    handleSizeChange(val) {
      this.paginationOptions.pageSize = val;
      this.paginationOptions.currentPage = 1;
      this.getPlanList();
    },
    // 改变分页数量
    handlePageChange(val) {
      this.paginationOptions.currentPage = val;
      this.getPlanList();
    },
    // 获取计划列表
    getPlanList() {
      const params = {
        ...this.savedForm,
        page: this.paginationOptions.currentPage,
        pageSize: this.paginationOptions.pageSize
      };
      GET_PLAN_LIST(params)
        .then(res => {
          if (res.status) {
            if (!res.result || res.result === '[]') {
              this.tableData = [];
            } else {
              const tableData = res.result.map(val => {
                val.time = miment(val.keepStartDate).format('YYYY-MM-DD') + ' - ' + miment(val.keepEndDate).format('YYYY-MM-DD');
                return val;
              });
              this.tableData = tableData;

              this.paginationOptions.totalRows = res.total;
            }
          } else {
            Message({
              type: 'error',
              message: res.message
            });
          }
        });
    },
    // 删除
    handleDelete(row) {
      const params = {
        id: row.id,
        modifiedBy: this.userInfo.userName,
        modifiedUserCode: this.userInfo.userCode
      };
      this.$confirm(`确认要删除此数据吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          DELETE_KEEP_PLAN(params)
            .then(res => {
              if (res.status) {
                Message({
                  type: 'success',
                  message: '删除成功'
                });
                this.getPlanList();
              } else {
                Message({
                  type: 'error',
                  message: res.message
                });
              }
            })
            .catch(res => {
              Message({
                type: 'error',
                message: res.message
              });
            });
        })
        .catch(() => {
          Message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>

